<template>
  <div class="equipment">
    <div class="header">
      <Dlg />
    </div>
    <div class="content" direction="vertical">
      <!--左边树的展示部分-->
      <div class="left-tree">
        <Tree
          :systemTreeDatas="treeSystemData"
          @ChangeTreeSystemData="ChangeTreeSystemData"
        />
      </div>
      <!--中间表的展示部分-->
      <div class="middle">
        <Middle
          :showTableCol="showTableColF"
          :showTableData="showTableDataF"
          :selectTableCol="selectTableColF"
          :selectTableData="selectTableDataF"
          :optionsOne="optionsOneF"
          :optionsTwo="optionsTwoF"
          :optionsThree="optionsThreeF"
          :optionsFour="optionsFourF"
          @ChangeShowTableHeader="ChangeShowTableHeader"
          @ChangeShowTableData="ChangeShowTableData"
          @ChangeSelectTableHeader="ChangeSelectTableHeader"
          @ChangeSelectTableData="ChangeSelectTableData"
        />
      </div>
      <!--右边搜索部分-->
      <div class="right">
        <Right />
      </div>
    </div>
    <!--底部按钮部分-->
    <div class="foot">
      <Foot />
    </div>
  </div>
</template>

<script setup>
import {
  getCoolType,
  getPhaseNumber,
  getTreeNode,
  getVoltageClasses,
  getWindingNumber,
} from "@/apis/EquipmentInfor";
import LibraryDataJson from "@/datas/EquipmentLibraryData.json";
import LibraryParameterJson from "@/datas/EquipmentLibraryParameters.json";
import DataJson from "@/datas/PrimarySubstationData.json";
import ParameteJson from "@/datas/PrimarySubstationParameters.json";
import { onMounted, ref } from "vue";
import Dlg from "./components/Dlg.vue";
import Foot from "./components/Foot.vue";
import Middle from "./components/Middle.vue";
import Right from "./components/Rifht.vue";
import Tree from "./components/Tree.vue";

//----------------------------------------------------数据定义

// 设备展示表格表头数据
const showTableColF = ref([]);
// 设备选择表格表头数据
const selectTableColF = ref([]);
// 设备展示表格数据
const showTableDataF = ref([]);
// 设备选择表格数据
const selectTableDataF = ref([]);

const optionsOneF = ref([]); //当前第一个条件选择器的集合
const optionsTwoF = ref([]); //当前第一个条件选择器的集合
const optionsThreeF = ref([]); //当前第一个条件选择器的集合
const optionsFourF = ref([]); //当前第一个条件选择器的集合

//树系统数据
const treeSystemData = ref([]);

//----------------------------------------------------方法实现

// 改变showTable表头的方法
const ChangeShowTableHeader = (val) => {
  console.log("ChangeShowTableHeader", val);
  showTableColF.value = val;
  console.log("ChangeShowTableHeader", showTableColF);
};

// 改变showTable数据的方法
const ChangeShowTableData = (val) => {
  console.log("ChangeShowTableData", val);
  showTableDataF.value = val;
  console.log("ChangeShowTableData", showTableDataF);
};

// 改变selectTable表头的方法
const ChangeSelectTableHeader = (val) => {
  console.log("ChangeSelectTableHeader", val);
  selectTableColF.value = val;
};

// 改变selectTable数据的方法
const ChangeSelectTableData = (val) => {
  console.log("ChangeSelectTableData", val);
  selectTableDataF.value = val;
};

//----------------------------------------------------响应

// 改变树节点的数据，用于添加新的设备
const ChangeTreeSystemData = (val) => {
  console.log("new treeData:", val);
};

/*
接受msg来自PC端获取一次变电设备
*/
const recieveMsgToInitPrimarySubstationEquipment = () => {
  console.log("recieveMsgToInitPrimarySubstationEquipment : 开始");

  window["recieveMsgToInitPrimarySubstationEquipment"] = (equipmentInfor) => {
    //获取数据
    const data = ref([]);
    if (equipmentInfor == null) {
      //本地数据
      data.value = [];
    } else {
      data.value = JSON.parse(equipmentInfor);
      console.log("recive data:", data.value);
    }
    //渲染数据
  };
};

onMounted(() => {
  // 初始化设备展示表格数据
  console.log("JSON:", ParameteJson);
  console.log("JSON.HEADER", ParameteJson[0].header);
  ChangeShowTableHeader(ParameteJson[0].header);
  // 初始化设备展示表格数据
  console.log("JSON", DataJson);
  console.log("JSON.DATA", DataJson[0].data);
  ChangeShowTableData(DataJson[0].data);
  // 初始化设备库表头数据
  console.log("LIBRARY-JSON.HEADER", LibraryParameterJson[0].header);
  ChangeSelectTableHeader(LibraryParameterJson[0].header);
  // 初始化设备库表格数据
  console.log("LIBRARY-JSON.DATA", LibraryDataJson[0].data);
  ChangeSelectTableData(LibraryDataJson[0].data);
  // 初始化筛选项的下拉值
  const cooldata = getCoolType();
  console.log("冷却方式", cooldata);
  const voltagedata = getVoltageClasses();
  console.log("电压等级", voltagedata);
  const windingdata = getWindingNumber();
  console.log("绕数", windingdata);
  const phasedata = getPhaseNumber();
  console.log("相数", phasedata);
  optionsOneF.value = cooldata;
  optionsTwoF.value = voltagedata;
  optionsThreeF.value = windingdata;
  optionsFourF.value = phasedata;

  // 初始化树节点数据
  const data = getTreeNode();
  treeSystemData.value = data;
  recieveMsgToInitPrimarySubstationEquipment();
});
</script>

<style lang="scss" scoped>
.equipment {
  width: 1450px;
  height: 780px;
  .header {
    width: 1460px;
    height: 100;
  }
  .content {
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    height: calc(100% - 51px);
    .left-tree {
      width: 150px;
      border: 1px solid rgba(233, 225, 225);
    }

    .middle {
      border: 1px solid rgb(233, 225, 225);
      width: 1150px;
      flex: 1;
      margin-left: 10px;
      margin-right: 10px;
    }
    .right {
      width: 200px;
      border: 1px solid rgb(233, 225, 225);
    }
  }
}
</style>
